"use client";

import React, { useState } from "react";
import {
  UserOutlined,
  LockOutlined,
  MailOutlined,
  LeftOutlined,
} from "@ant-design/icons";
import { Button, Form, Input, Checkbox, Modal } from "antd";
import { useRouter } from "next/navigation";
import api from "../utils/api"; // 导入 axios 实例
import FileCard from "@/components/FileCard";
import styles from "@/components/Font.module.css";

// 邮箱格式验证正则表达式
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

export default function RegisterPage() {
  const [loading, setLoading] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [errorModalVisible, setErrorModalVisible] = useState(false); // 错误提示 modal
  const [errorMessage, setErrorMessage] = useState(""); // 错误消息
  const [successModalVisible, setSuccessModalVisible] = useState(false); // 注册成功弹窗
  const router = useRouter();
  const [form] = Form.useForm();

  const onFinish = async (values) => {
    setLoading(true);
    try {
      const response = await api.post("/users/register", {
        username: values.username,
        email: values.email,
        display_name: values.username,
        password: values.password,
      });

      // 判断返回状态码是否为 201
      if (response.status === 201) {
        // 成功时打开注册成功弹窗
        setSuccessModalVisible(true);
      } else {
        // 失败时打开错误弹窗
        setErrorMessage("注册失败，请稍后再试。");
        setErrorModalVisible(true);
      }
    } catch (error) {
      console.log("Error Response:", error.response?.data);
      if (error.response) {
        if (error.response.status === 409) {
          if (error.response.data.message === "Username already exists") {
            setErrorMessage("用户名已存在，请更换用户名");
          } else if (error.response.data.message === "Email already exists") {
            setErrorMessage("邮箱已存在，请更换邮箱");
          } else {
            setErrorMessage("注册失败，请检查输入信息");
          }
        } else {
          setErrorMessage(
            error.response.data.message || "服务器错误，请稍后再试"
          );
        }
      } else if (error.request) {
        setErrorMessage("网络错误，请检查网络连接");
      } else {
        setErrorMessage("请求设置错误，请稍后再试");
      }
      setErrorModalVisible(true); // 显示错误提示弹窗
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  const onFinishFailed = (errorInfo) => {
    setErrorMessage("验证失败，请检查输入内容");
    setErrorModalVisible(true);
  };

  const showLicenseModal = () => {
    setIsModalVisible(true);
  };

  const handleModalCancel = () => {
    setIsModalVisible(false);
  };

  const handleSuccessModalCancel = () => {
    setSuccessModalVisible(false); // 关闭注册成功弹窗
    router.push("/login"); // 跳转到登录页面
  };

  const buttonStyle = {
    backgroundColor: "#ffffff",
    color: "#000000",
    border: "1px solid #cccccc",
    height: 40,
    fontSize: 14,
    borderRadius: 4,
    width: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    transition: "all 0.3s ease",
  };

  const buttonHoverStyle = {
    backgroundColor: "#f5f5f5",
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <FileCard>
        <Form
          form={form}
          name="register-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          size="large"
          style={{ width: 400 }}
          labelAlign="left"
        >
          <div className={styles.cardtitle}>用户注册</div>
          <Button
            type="default"
            onClick={() => router.back()}
            style={{
              position: "absolute",
              top: 20,
              left: 20,
              zIndex: 1,
            }}
          >
            <LeftOutlined /> 返回
          </Button>

          <Form.Item
            label={<span className={styles.text}>用户名</span>}
            name="username"
            rules={[
              { required: true, message: "请输入用户名！" },
              { min: 3, message: "用户名长度不能少于 3 个字符" },
              { max: 20, message: "用户名长度不能超过 20 个字符" },
            ]}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            style={{ marginBottom: 20 }}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder="请输入用户名"
              style={{ width: "100%" }}
            />
          </Form.Item>

          <Form.Item
            label={<span className={styles.text}>邮箱</span>}
            name="email"
            rules={[
              { required: true, message: "请输入邮箱！" },
              { pattern: emailRegex, message: "请输入有效的邮箱地址" },
            ]}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            style={{ marginBottom: 20 }}
          >
            <Input
              prefix={<MailOutlined />}
              placeholder="请输入邮箱"
              style={{ width: "100%" }}
            />
          </Form.Item>

          <Form.Item
            label={<span className={styles.text}>密码</span>}
            name="password"
            rules={[
              { required: true, message: "请输入密码！" },
              { min: 6, message: "密码长度不能少于 6 个字符" },
            ]}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            style={{ marginBottom: 20 }}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="请输入密码"
              style={{ width: "100%" }}
            />
          </Form.Item>

          <Form.Item
            label={<span className={styles.text}>确认密码</span>}
            name="confirm"
            dependencies={["password"]}
            hasFeedback
            rules={[
              { required: true, message: "请再次输入密码！" },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("两次输入的密码不一致！"));
                },
              }),
            ]}
            labelCol={{ span: 6 }}
            wrapperCol={{ span: 18 }}
            style={{ marginBottom: 20 }}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="请再次输入密码"
              style={{ width: "100%" }}
            />
          </Form.Item>

          {/* 许可证同意按钮 */}
          <Form.Item
            name="agreement"
            valuePropName="checked"
            rules={[{ required: true, message: "请先阅读并同意服务许可" }]}
            wrapperCol={{ offset: 6, span: 18 }}
            style={{ marginBottom: 20 }}
          >
            <Checkbox>
              已阅读并同意{" "}
              <span
                style={{ fontWeight: "bold", cursor: "pointer" }}
                onClick={showLicenseModal}
              >
                服务许可
              </span>
            </Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
            <Button
              type="default"
              htmlType="submit"
              block
              loading={loading}
              style={buttonStyle}
              onMouseEnter={(e) =>
                (e.target.style.backgroundColor =
                  buttonHoverStyle.backgroundColor)
              }
              onMouseLeave={(e) =>
                (e.target.style.backgroundColor = buttonStyle.backgroundColor)
              }
            >
              注册
            </Button>
          </Form.Item>
        </Form>
      </FileCard>
      {/* 服务许可弹窗 */}
      <Modal
        title="服务许可协议"
        visible={isModalVisible}
        onCancel={handleModalCancel}
        footer={[
          <Button key="close" onClick={handleModalCancel}>
            关闭
          </Button>,
        ]}
      >
        <div style={{ whiteSpace: "pre-wrap" }}>
          {`
欢迎使用 微百合论坛 服务！
本协议是您（以下简称 “用户”）与小蓝鲸（以下简称 “我们”）之间关于使用本论坛服务的法律协议。请仔细阅读本协议条款，您使用本服务即表示同意接受全部条款约束。

第一条 定义
论坛服务：指我们通过 微百合论坛平台提供的信息发布、交流、互动等网络服务。
用户内容：指用户在论坛内发布的文字、图片、视频、链接等任何形式的内容。

第二条 服务内容
我们提供论坛注册、发帖、回帖、私信、社区管理等基础功能。
我们有权根据运营需要调整或终止部分服务（将提前通知用户）。

第三条 用户义务
合法性承诺：用户不得发布或传播以下内容：
违反法律法规、公序良俗的信息；
虚假、欺诈、色情、暴力、恐怖主义内容；
侵犯他人知识产权、隐私或名誉的内容；
广告、垃圾信息或其他未经允许的商业推广。
账号安全：用户需妥善保管账号密码，因账号泄露导致的损失由用户自行承担。

第四条 知识产权
用户保留其发布内容的所有权，但授予我们免费、永久、非独家的使用权（包括复制、修改、展示、分发等）。
论坛标志、界面设计、软件代码等知识产权归我们所有，未经授权不得使用。

第五条 免责声明
我们不保证服务的持续性、安全性或无缺陷，不承担因网络故障、第三方行为等导致的损失。
用户因使用论坛内容而产生的风险由用户自行承担。

第六条 隐私政策
我们将按照《隐私政策》处理用户个人信息，详情请查阅 [链接]。

第七条 协议修改
我们有权单方面修改本协议，修改后的条款将在论坛公告后生效。用户继续使用服务即视为接受修改后的协议。

第八条 服务终止
若用户违反本协议，我们有权暂停或永久封禁账号，且不退还已产生费用。
我们可因不可抗力、政府要求等原因终止服务。

第九条 争议解决
因本协议产生的争议，双方应友好协商；协商不成的，提交 [XX 市] 人民法院诉讼解决。

第十条 其他条款
本协议未提及事宜，以法律法规为准。
条款部分无效不影响其他条款效力。
`}
        </div>
      </Modal>

      {/* 错误提示 Modal */}
      <Modal
        title="错误"
        visible={errorModalVisible}
        onCancel={() => setErrorModalVisible(false)}
        footer={[
          <Button key="close" onClick={() => setErrorModalVisible(false)}>
            关闭
          </Button>,
        ]}
      >
        <div>{errorMessage}</div>
      </Modal>

      {/* 注册成功 Modal */}
      <Modal
        title="注册成功"
        visible={successModalVisible}
        onCancel={handleSuccessModalCancel}
        footer={[
          <Button key="close" onClick={handleSuccessModalCancel}>
            OK
          </Button>,
        ]}
      >
        <div>您已成功注册，即将前往登录界面。</div>
      </Modal>
    </div>
  );
}
